<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花滩子水库信息化大屏</title>
    <link rel="stylesheet" href="css/leaflet.css">
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <!-------------------- 地图层 ---------------------------------------->
    <div id="map-layer">
        <!---------- 控制面板容器 ---------->
        <div class="map-controls">
            <div class="map-control map-control-zoom-in"></div>
            <div class="map-control map-control-zoom-out"></div>
            <div class="map-control map-control-fullscreen"></div>
            <div class="map-control map-control-locate"></div>
            <div class="map-control map-control-measure"></div>
            <div class="map-control map-control-legend"></div>
            <div class="map-control map-control-layer"></div>
        </div>

        <!---------- 地图渲染容器 ---------->
        <div class="map-renderer">
            <div class="map-renderer-layer" id="map-renderer-layer"></div>
        </div>
    </div>

    <!-------------------- 内容层 ---------------------------------------->
    <main id="content-layer">
        <!---------- 标题栏区 ---------->
        <header class="title-bar">
            <h1>贵州省铜仁市花滩子水库工程环境监测系统v0.2</h1>
            <div class="showTime">当前时间：2024年2月17-0时0分0秒</div>
        </header>


        <!---------- 数据展示区 ---------->
        <div class="data-layer">
            <!-- 左侧栏 -->
            <div class="left-column">
                <!-- 项目概况 -->
                <div class="block project-overview">
                    <h2>项目概况</h2>
                    <img src="images/project.jpg" alt="项目图">
                </div>
                <!-- 环保要求 -->
                <div class="block env-requirements">
                    <h2>环保要求</h2>
                    <div class="scroll-box" data-file="data/project.txt"></div>
                </div>
                <!-- 项目进度 -->
                <div class="block achievement">
                    <h2>成果及台账</h2>
                    <div class="result-item"><span>季报提交数量</span><b>3</b><i>- 0%</i></div>
                    <div class="result-item"><span>检测意见书</span><b>5</b><i>↓ 20%</i></div>
                    <div class="result-item"><span>工程监测成果</span><b>54</b><i>↑ 30%</i></div>
                    <div class="result-item"><span>成果共计</span><b>124</b><i>↑ 50%</i></div>
                </div>
            </div>

            <!-- 中间栏 -->
            <div class="middle-column">
                <!-- 生态流量监控 -->
                <div class="block eco-flow">
                    <h2>生态流量监控</h2>
                    <video controls muted autoplay loop>
                        <source src="videos/ecology.mp4" type="video/mp4">
                    </video>
                    <!-- <video src="videos/ecology1.mp4" muted autoplay loop></video> -->
                </div>
                <!-- 管控措施 -->
                <div class="block control-measures">
                    <h2>管控措施</h2>
                    <div class="scroll-box" data-file="data/measures.txt"></div>
                </div>
            </div>

            <!-- 右侧栏 -->
            <div class="right-column">
                <!-- 水环境监测 -->
                <div class="block water-env">
                    <h2>水环境监测数据</h2>
                    <div id="water-chart" class="chart"></div>
                </div>
                <!-- 空气质量监测 -->
                <div class="block air-quality">
                    <h2>环境空气质量</h2>
                    <div id="air-chart" class="chart"></div>
                </div>
                <!-- 噪声质量监测 -->
                <div class="block noise-quality">
                    <h2>噪声质量监测</h2>
                    <div id="noise-chart" class="chart"></div>
                </div>
            </div>
        </div>

        <!---------- 状态栏区 ---------->
        <footer class="status-bar">
            <div class="left-status">
                <img src="images/logo.png" class="logo" alt="公司标志">
                <span>中水北方勘测设计研究有限责任公司</span>
            </div>
            <div class="right-status">
                <span id="current-date"></span>
                <span id="weather">晴 8℃</span>
            </div>
        </footer>
    </main>

    <script src="js/leaflet.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>